<script setup>
    import { ref } from 'vue';
    import ElementPlus from 'element-plus';
    import 'element-plus/dist/index.css';

    const name = ref("hello vue");
    const activeIndex = ref('1');
    const isLoggedIn = ref(false);

    const hotArticles = ref([
    { id: 1, title: 'Vue3.0新特性使用攻略', date: '2024-10-28' },
    { id: 2, title: 'Vite脚手架使用详解', date: '2024-10-25' },
    { id: 3, title: 'ElementPlus框架应用场景', date: '2024-10-12' },
    { id: 4, title: '5款独立开发者必备神器', date: '2024-10-12' }
    ]);

    const hotCourses = ref([
    { id: 1, title: '零基础学JavaScript', price: '¥99' },
    { id: 2, title: 'Vue.js从入门到实战', price: '¥199' },
    { id: 3, title: '深入浅出状态管理', price: '¥299' },
    { id: 4, title: '说透大厂前端项目场景面试题', price: '¥399' }
    ]);

    const hotProducts = ref([
    { id: 1, image: '/src/assets/images/product1.png', title: 'IT书籍' },
    { id: 2, image: '/src/assets/images/product2.png', title: 'IT配件' },
    { id: 3, image: '/src/assets/images/product3.png', title: 'IT软件' }
    ]);

    const toggleLogin = () => {
    isLoggedIn.value = !isLoggedIn.value;
    };

    const viewMoreArticles = () => {
    alert("查看更多文章");
    };

    const viewMoreCourses = () => {
    alert("查看更多课程");
    };

    const viewMoreProducts = () => {
    alert("查看更多商品");
    };
</script>

<template>
   <el-container>
       
        
        <el-main>
            <el-carousel height="450px">
                <el-carousel-item>
                    <img src="/src/assets/images/carousel1.png"/>
                </el-carousel-item>
                <el-carousel-item>
                    <img src="/src/assets/images/carousel2.png"/>
                </el-carousel-item>
                <el-carousel-item>
                    <img src="/src/assets/images/carousel3.png"/>
                </el-carousel-item>
            </el-carousel>

            <div class="content-section">
                <div class="section">
                    <div class="section-title">热门文章</div>
                    <div class="card-grid">
                        <div class="card-item" v-for="article in hotArticles" :key="article.id">
                            <h3>{{ article.title }}</h3>
                            <p>{{ article.date }}</p>
                        </div>
                    </div>
                    <div class="view-more">
                        <el-button type="primary" @click="viewMoreArticles">查看更多</el-button>
                    </div>
                </div>
                <div class="section">
                    <div class="section-title">热门课程</div>
                    <div class="card-grid">
                        <div class="card-item" v-for="course in hotCourses" :key="course.id">
                            <h3>{{ course.title }}</h3>
                            <p>{{ course.price }}</p>
                        </div>
                    </div>
                    <div class="view-more">
                        <el-button type="primary" @click="viewMoreCourses">查看更多</el-button>
                    </div>
                </div>
                <div class="product-carousel">
                    <div class="section-title">热门商品</div>
                    <el-carousel height="450px">
                        <el-carousel-item>
                            <img src="/src/assets/images/product01.png"/>
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="/src/assets/images/product02.png"/>
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="/src/assets/images/product03.png"/>
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="/src/assets/images/product04.png"/>
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="/src/assets/images/product05.png"/>
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="/src/assets/images/product06.png"/>
                        </el-carousel-item>
                    </el-carousel>
                    <div class="view-more">
                        <el-button type="primary" @click="viewMoreProducts">查看更多</el-button>
                    </div>
                </div>
            </div>
        </el-main>
        
    </el-container>
</template>



<style scoped>
    .header-logo {
                display: flex;
                align-items: center;
            }
            .header-logo img {
                height: 60px;
            }
            .header-logo h2 {
                margin-left: 10px;
            }
            .header-nav {
                display: flex;
                align-items: center;
            }
            .header-search {
                margin-left: auto;
            }
            .header-user {
                display: flex;
                align-items: center;
            }
            .header-user img {
                height: 40px;
                width: 40px;
                border-radius: 50%;
            }
            .content-section {
                display: flex;
                justify-content: space-between;
                padding: 20px;
            }
            .section {
                width: 30%;
                position: relative; 
            }
            .section-title {
                font-size: 24px;
                margin-bottom: 20px;
            }
            .card-grid {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .card-item {
                border: 1px solid #ebeef5;
                border-radius: 4px;
                padding: 10px;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            }
            .card-item img {
                height: 100px;
                width: 100px;
                margin-bottom: 10px;
            }
            .card-item h3 {
                margin: 0;
                font-size: 16px;
            }
            .card-item p {
                margin: 5px 0;
                color: #909399;
            }
            .view-more {
                position: absolute;
                top: 10px; 
                right: 10px;
            }
            .product-carousel {
                width: 30%;
                position: relative; 
            }
            .product-carousel .view-more {
                position: absolute;
                top: 10px;
                right: 10px;
            }
</style>